﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>本例用于测试background-size属性</title>
<style type="text/css">
#body1{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}

.bgc{
float:left;
width:200px;
height:100px;
margin:20px;
padding:10px;
border:2px fuchsia solid;
	}
.mgd{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px fuchsia solid;
	overflow:auto;
}
#body2{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body2 div{
	width:400px;
	height:600px;
	margin:20px;
	padding:10px;
	border:2px green solid;
	background-image:url('images/jdt02.png');
	background-repeat:no-repeat;
}
#bg1{
}
#bg2{
	background-size:100px 100px;
}
#bg3{
	background-size:200px;
}
#bg4{
	background-size:50% 100%;
}
#bg5{
	background-size:20%;
}
#bg6{
	background-size:cover;
}
#bg7{
	background-size:contain;
}
</style>
</head>
<body>
<div id="body1">
<div class="bgc">本例用于测试background-size属性</div>
</div>
<div id="body2">
	<div id="bg1">01默认无background-size属性</div>
	<div id="bg2">02以单位值(成对)设置background-size属性</div>
	<div id="bg3">03以单位值(单个)设置background-size属性,<br/>即第二个值为auto(按比率缩放)</div>
	<div id="bg4">04以父元素的百分比来设置(成对)background-size属性</div>
	<div id="bg5">05以父元素的百分比来设置(单个)background-size属性,<br/>即第二个值为auto(按比率缩放)</div>
	<div id="bg6">06以属性值cover来设置,将按比率进行缩放使覆盖整个元素,因此可能会丢失背景显示</div>
	<div id="bg7">07以属性值contain来设置,将按比率扩大是适当尺寸(最小原则)，以适应元素</div>
</div>
<div>background-size是CSS3新增的特性,可考虑在移动端使用。</div>
<div>本页面在IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持。</div>
<div>背景图不是按其图片比率进行缩放，而是按所属元素的长宽值进行缩放</div>
<div>如果只设置x值,则y值根据背景图进行实际缩放</div>
</body>
</html>